<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚顶商贸</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/swiper.css">

    <script src="./js/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
    <style>
        #show {
            max-width: 1920px;
            margin: 0 auto;
        }

        .swiper-pagination-bullet-active {
            background-color: #7cb930 !important;
        }

        .swiper-container2 {
            margin-left: auto;
            margin-right: auto;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .carousel .swiper-slide div,
        .product-kinds .swiper-slide div {
            padding: 0 30px;
            /* box-sizing: border-box; */
            /* margin: 0 30px; */
        }

        .carousel .swiper-slide img,
        .product-kinds .swiper-slide img,
        #show img {
            width: 100%;
        }

        .swiper-button-prev {
            left: 10px;
            width: 39px !important;
            height: 52px !important;
            background: url(./images/index/prev-icon.png) no-repeat !important;
            background-size: 100% 100%;
        }

        .swiper-button-next {
            width: 39px;
            height: 52px;
            background: url(./images/index/next-icon.png) no-repeat !important;
            background-size: 100% 100%;
        }

        .product-kinds .content .swiper-button-prev,
        .product-kinds .content .swiper-button-next {
            top: 70%;
        }

        #index-header .product-link {
            position: relative;
        }

        #index-header .product-link-content {
            display: none;
            position: absolute;
            top: 70px;
            left: 0;
            z-index: 9999;
            overflow: hidden;
        }

        #index-header .product-link-content ul {
            padding: 0;
        }

        #index-header .product-link-content li {
            float: none;
            height: 40px;

        }

        #index-header .product-link-content li a {
            display: block;
            line-height: 40px;
            color: white;
            background: red;

        }
    </style>
</head>

<body>
    <!-- 导航区域开始 -->
    <header id="index-header">
        <div class="nav-box">
            <a class="logo-link" href="./index.html">
                <img src="./images/index/logo-link.png" alt="" />
            </a>

            <ul class="nav-left">
                <li class="nav-active">
                    <a href="./index.html">首页</a>
                </li>
                <li class="product-link">
                    <a href="./product.html">
                        产品鉴赏
                    </a>
                    <ul class="product-link-content">
                        <li>
                            <a href="#">亚麻籽油</a>
                        </li>
                        <li>
                            <a href="#">莜面</a>
                        </li>
                        <li>
                            <a href="#">荞面</a>
                        </li>
                        <li>
                            <a href="#">黎麦</a>
                        </li>
                        <li>
                            <a href="#">莜麦糊</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#">热卖单品</a>
                </li>
                <li>
                    <a href="./to-join.html">加盟计划</a>
                </li>

            </ul>
            <ul class="nav-right">
                <li>
                    <a href="#">手机APP</a>
                </li>
                <li>
                    <a href="./brand-introduce.html">品牌介绍</a>
                </li>
                <li>
                    <a href="#">新闻中心</a>
                </li>
                <li>
                    <a href="#">会员登录</a>
                </li>
            </ul>
        </div>

    </header>
    <!-- 导航区域结束 -->

    <!-- <div class="clearfix"></div> -->

    <!-- 轮播区域开始 -->
    <div id="show" class="swiper-container2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./images/index/lunbo1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/index/lunbo2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/index/lunbo3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/index/lunbo4.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- 轮播区域结束 -->

    <!-- 主要内容区域开始 -->
    <div id="index-content">
        <!-- 搜索 -->
        <div class="search">
            <p class="key-word">
                <strong>热门关键字:</strong>
                <span>健康</span>
                <span>绿色</span>
                <span>粗粮</span>
                <span>系统平台</span>
                <span>招商加盟</span>
                <span>诚信公司</span>
            </p>
            <p class="search-input">
                <input type="text" placeholder="search" />
                <a href="#">
                    <img src="./images/index/search-icon.png" alt="" />
                </a>
            </p>
        </div>

        <!-- 品质安全 -->
        <div class="quality">
            <h2>品质安全</h2>
            <p>Quality safety</p>

            <h3>健康创建美好生活</h3>
            <p>Health to create a good life</p>

            <div class="quality-content">
                <ul>
                    <li>
                        <img src="./images/index/quality-icon1.png" alt="" />
                        <p style="text-align: left;">公司以“优粮步骆”为核心品牌，以绿色农产品种植、生产、加工及线上线下营销为运营模式是一家“公司+基地+农户”的企业。</p>
                        <p class="btn">
                            <a href="#">MORE ></a>
                        </p>
                    </li>
                    <li>
                        <img src="./images/index/quality-icon2.png" alt="" />
                        <p style="text-align: left;">公司的的种植产地在内蒙古锡林郭勒盟南端太仆寺旗，远离人群，绿色无污染，保障每一颗都健康绿色。</p>
                        <p class="btn">
                            <a href="#">MORE ></a>
                        </p>
                    </li>
                    <li>
                        <img src="./images/index/quality-icon3.png" alt="" />
                        <p style="text-align: left;">地处特定的生态环境，海拔高，日照充足，昼夜温差大，无霜期短，具有得天独厚的优势。</p>
                        <p class="btn">
                            <a href="#">MORE ></a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 热卖单品 -->
        <div class="hot-sale">
            <div class="hot-sale-title">
                <h2>热卖单品</h2>
                <p>Hot sale</p>
                <h3>天然莜麦糊 喝出好身材</h3>
                <p>Natural naked oats drink a good figure</p>
            </div>
            <div class="hot-scale-content">
                <div class="pic">
                    <img src="./images/index/hot-scale-banner.png" alt="" />
                </div>
            </div>

        </div>

        <!-- 莜麦糊 -->
        <div class="youmaihu">
            <div class="youmaihu-title">
                <h2>莜麦糊</h2>
                <p>莜麦是一年生草本植物。生长期短，成熟后子实容易</p>
                <p>和外壳脱离，磨成粉后可食用，就叫莜面，也叫燕麦。</p>
            </div>
            <div class="carousel" style="padding: 0 66px;">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div>
                                <img src="./images/index/youmaihu1.png" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <img src="./images/index/youmaihu2.png" alt="">

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <img src="./images/index/youmaihu3.jpg" alt="">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            <p class="youmaihu-more">
                <a href="#">了解更多 >></a>
            </p>
        </div>

        <!-- 产品鉴赏 -->
        <div class="product">
            <div class="product-title">
                <h2>产品鉴赏</h2>
                <p>Product appreciation</p>
                <h3>吃出健康 品味生活</h3>
                <p>Eat a healthy taste of life</p>
            </div>
            <div class="product-banner">
                <img src="./images/index/product-banner.jpg" alt="" />
            </div>

            <div class="product-kinds">
                <div class="content" style="padding: 0 66px;">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="title">
                                    <h3>荞面</h3>
                                    <p class="info">荞麦面是中国西北地区传统特色面 食，甘肃陇南，陇东，陇西等地特 产。北魏时期《齐民要术·杂说》都 记载了荞麦面，荞麦起源于中国， 后来荞麦流传到日本、朝鲜半岛等地。
                                    </p>

                                    <img src="./images/index/product-qiaomian.jpg" alt="" />

                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="title">
                                    <h3>莜面</h3>
                                    <p class="info">莜（yóu）面是由莜麦加工而成的面 粉，在山西、内蒙古，河北坝上地区 也是莜麦面食品的统称。
                                    </p>
                                    <img src="./images/index/product-youmian.jpg" alt="">

                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="title">
                                    <h3>亚麻籽油</h3>
                                    <p class="info">西北地区昼夜温差均衡、肥沃的土壤、以及 充足的阳光等自然生态环境最适合亚麻等特 种油料作物的种植，属全国无工业污染带.。
                                    </p>

                                    <img src="./images/index/product-yamaziyou.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <p class="product-more">
                    <a href="#">了解更多 >></a>
                </p>

            </div>

        </div>

        <!-- 我们的优势 -->
        <div class="advantage">
            <div class="advantage-title">
                <h2>我们的优势</h2>
                <p>Our advantages</p>
                <h3>为全家的健康加油</h3>
                <p>Refuel for the health of the family</p>
            </div>
            <div class="advantage-content">
                <img src="./images/index/advantage-banner.jpg" alt="" />
            </div>
        </div>

        <!-- 行业资讯 -->
        <div class="information">
            <div class="information-title">
                <h2>行业资讯</h2>
                <p>Industry information</p>
            </div>
            <div class="information-info1 information-info">
                <ul>
                    <li>
                        <h4>
                            <strong>01</strong>粗粮的营养分析</h4>
                        <p>粗粮含有丰富的不可溶性纤维素，有利于保障消化系统正常运转。它与可溶性纤维协同工作，可降低血液中低密度胆固醇和甘油三酯的浓度；增加食物在胃里的停留时间，延迟饭后葡萄糖吸收的速度，降低高血压、糖尿病、肥胖症和心脑血管疾病的风险。</p>
                        <p>医学研究还表明，纤维素有助于抵抗胃癌、肠癌、乳腺癌、溃疡性肠炎等多种疾病。</p>
                    </li>
                    <li>
                        <h4>
                            <strong style="color: white">02</strong>什么是绿色健康食品</h4>
                        <p>民以食为天。食品安全在当今已经成为全世界民众普遍关注的热点问题。开发和应用绿色食品，快速发展绿色食品产业，有利于提高农产品和食品的质量，保障人民的食物消费安全；有利于优化农产品结构，推进农业产业结构的战略性调整；也有利于培植农业精品品牌，促进农业产业化的进程；利于增强农产品在国内外市场上的竞争力，促进外向型农业的发展，是农业增效和农民增收的有效措施，是现代农业发展的方向。</p>
                    </li>
                </ul>
            </div>

            <div class="information-info2 information-info">
                <ul>
                    <li>
                        <h4>
                            <strong style="color: white">03</strong>幼儿膳食粗粮不可缺</h4>
                        <p>幼儿是指1周岁-3周岁的小儿，这是小儿发育最快的年龄段之一。</p>
                        <p>在这阶段，合理，平衡的膳食对他们是十分重要的，有些家长最需要的，因此孩子周岁之后，便“填鸭式”地给孩子吃些高热量，高蛋白的食物。孩子长成了“小胖墩”，仍认为是正常的，殊不知儿童期肥胖可导致成人期的高血压，心血管疾病，糖尿病等一系列严重的健康问题。</p>
                        <p>合理的营养是健康的物质基础，而平衡的膳食是合理营养的唯一途径。在平衡膳食中，粗细粮搭配十分重要，可又往往被一些家长所忽视，由于有些家长没有吃粗粮的习惯，孩子也很少吃到粗粮。 </p>
                    </li>
                    <li>
                        <h4>
                            <strong>04</strong>共同推进“一带一路”建设农业合作的愿景与行动</h4>
                        <p>进入21世纪，世界经济一体化加快推进，以和平、发展、合作、共赢为主题的新时代已经开启。2013年9月和10月，中国国家主席习近平在出访中亚和东南亚国家期间，先后提出共建“丝绸之路经济带”和“21世纪海上丝绸之路”（以下简称“一带一路”）的重大倡议，得到国际社会高度关注。“一带一路”倡议秉承共商、共建、共享原则，致力于维护全球自由贸易体系和开放型世界经济，推动沿线各国实现经济政策协调，共同打造开放、包容、均衡、普惠的区域经济合作架构。</p>
                        <p>农业交流和农产品贸易自古以来就是丝绸之路的主要合作内容。</p>
                    </li>
                </ul>
            </div>

        </div>

        <!-- 团购好礼 -->
        <div class="group-purchase">
            <div class="group-purchase-title">
                <h2>团购好礼</h2>
                <p>Buy a good gift</p>
            </div>
            <div class="group-purchase-content">
                <img src="./images/index/group-pic.jpg" alt="" />
            </div>
        </div>
    </div>
    <!-- 主要内容区域结束 -->

    <!-- 网页底部区域开始 -->
    <div id="index-footer">
        <ul>
            <li class="footer-info">
                <div style="padding: 0 20%">
                    <div class="footer-logo">
                        <img src="./images/index/footer-logo.png" alt="" />

                    </div>
                    <div class="footer-ma">
                        <div class="pic">
                            <div style="padding: 0 6%">
                                <img src="./images/index/ma1.jpg" alt="" />
                                <p>手机APP</p>
                            </div>

                        </div>
                        <div class="pic">
                            <div style="padding: 0 6%;">
                                <img src="./images/index/ma2.jpg" alt="" />
                                <p>微信公众号</p>
                            </div>

                        </div>
                    </div>
                </div>
            </li>
            <li class="footer-link">
                <p>
                    <strong>网站导航：</strong>
                    <br />
                    <span>产品鉴赏</span>
                    <br />
                    <span>热卖单品</span>
                    <br />
                    <span>加盟计划</span>
                    <br />
                    <span>手机APP</span>
                    <br />
                    <span>品牌介绍</span>
                    <br />
                    <span>新闻中心</span>
                    <br />
                    <span>会员登录</span>
                </p>
            </li>
            <li class="footer-site">
                <p>
                    <strong>联系我们：</strong>
                    <br />
                    <span>生产商：天津聚鼎农耕食品贸易有限公司</span>
                    <br />
                    <span>地址：天津津南南区长青科工贸园区</span>
                    <br />
                    <span>总经销商:北京聚鼎商贸有限公司</span>
                    <br />
                    <span>地址：北京市房山区绿地启航8号楼805</span>
                    <br />
                    <span>生产基地：内蒙古太旗绿健面粉厂</span>
                    <br />
                    <span>客服专线：010-53387275</span>
                </p>
            </li>
        </ul>
    </div>

    <div id="index-footer-bottom"></div>


    <script src="./js/jquery.min.js"></script>

    <script src="./js/swiper.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container2', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: false,
            speed: 1000
        })

        var mySwiper = new Swiper('.swiper-container', {
            paginationClickable: true,
            loop: true,
            autoplayDisableOnInteraction: false,
            speed: 1000,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            slidesPerView: 3
        })
    </script>


    <script>
        $(document).ready(function () {
            $('.product-link').on({
                'mouseenter': function () {
                    $('.product-link-content').slideDown();
                },
                'mouseleave': function () {
                    $('.product-link-content').slideUp();
                }
            })
        })
    </script>
</body>

</html>